<template>
  <template v-if="isCheck">
    <q-select
      class="my-select-box"
      dense
      outlined
      iconArr-dense
      clearable
      v-model="param.option"
      :options="iconArr"
      option-value="label"
      emit-value
      iconArr-selected-class="teal"
      @blur="v$.option.$touch()"
      :error="v$.option.$error"
      error-message="请选择图标！"
      @update:model-value="updateData"
      @clear="clearData"
    >
      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
          <q-item-section avatar>
            <q-icon :name="scope.opt.label" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ scope.opt.label }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-select>
  </template>
  <template v-else>
    <q-select
      class="my-select-box"
      dense
      outlined
      iconArr-dense
      clearable
      v-model="param.option"
      :options="iconArr"
      option-value="label"
      emit-value
      iconArr-selected-class="teal"
      @update:model-value="updateData"
      @clear="clearData"
    >
      <template v-slot:option="scope">
        <q-item v-bind="scope.itemProps">
          <q-item-section avatar>
            <q-icon :name="scope.opt.label" />
          </q-item-section>
          <q-item-section>
            <q-item-label>{{ scope.opt.label }}</q-item-label>
          </q-item-section>
        </q-item>
      </template>
    </q-select>
  </template>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, onMounted, watch, toRef } from 'vue';
import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';


export default defineComponent({
  name: 'AmyIconSelect',
  props: {
    isCheck: {
      type: Boolean,
      default: () => {
        return true;
      }
    },

    iconArr: {
      type: Array,   //传递对象数组
      default: () => {
        return []
      }
    },

    currentIcon: {
      type: String,   //传递的是单个字符串
      default: () => {
        return ''
      }
    },

    widthStyle: {
      type: Number,
      default: () => {
        return 250
      }
    }
  },

  setup (props, context) {
    //数据解构
    const {
      isCheck,
      iconArr,
      currentIcon
    } = toRefs(props);

    //选择项，只用来显示label,设置q-select的option-value，emit-value
    let param = ref({
      option: ''
    });

    //定义图标
    const updateData = () => {
      context.emit('update', param.value.option);
    }

    //清楚图标
    const clearData = () => {
      param.value.option = '';
    }

    //*******************************
    //      表单校验
    //*******************************
    //配置校验规则
    const rules = {
      option: { required }
    }

    //使用vuelidate，建立变量对应的校验规则
    const v$ = useVuelidate(rules, {
      option: toRef(param.value, 'option')
    });

    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {
      param.value.option = currentIcon.value;
    }

    //监视数据源
    watch(currentIcon, () => {
      init();
    }, { deep: true });

    //加载数据
    onMounted(() => {
      init();
    });

    return {
      isCheck,
      iconArr,
      param,
      updateData,
      clearData,
      v$
    }
  }
})
</script>

<style lang="scss" scoped>
.my-select-box {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

</style>
